<template>
  <div class="orderBox">
    <div v-show="xianTui">
      <var-list
        loading-text="正在努力输出"
        finished-text="一滴都没有了"
        error-text="出错了出错了"
        :finished="finished"
        v-model:loading="loading"
        @load="load"
      >
        <var-cell v-for="item in refund" :key="item">
          <!-- <template v-for="item in refund" :key="item"> -->
          <var-row>
            <var-col :span="3" :offset="1"
              ><img style="width: 40px; height: 40px" :src="item.pic"
            /></var-col>
            <var-col :span="8" style="textOverflow: ellipsis">{{
              item.dname
            }}</var-col>
            <var-col :span="4" :offset="8">退款完成</var-col>
          </var-row>
          <var-divider inset />
          <var-row>
            <var-col
              :span="10"
              :offset="4"
              style="fontSize: 14px; fontWeight: 400"
              >{{ item.Sname }}</var-col
            >
            <var-col
              :span="2"
              :offset="8"
              style="fontSize: 12px; fontWeight: 400"
              >×{{ item.Quantity }}</var-col
            >
            <var-col
              :span="8"
              :offset="16"
              style="fontSize: 12px; fontWeight: 400"
              >共{{ item.Quantity }}件商品,实付￥{{ item.Price }}</var-col
            >
          </var-row>
          <var-row>
            <var-col :span="4" :offset="14"
              ><var-button size="small" color="#fff"
                >再来一单</var-button
              ></var-col
            >
            <var-col :span="4" :offset="1"
              ><var-button size="small" color="#fff"
                >退款详情</var-button
              ></var-col
            >
          </var-row>
          <var-divider />
        </var-cell>
      </var-list>
      <!-- </template> -->
    </div>
    <div v-show="!xianTui">
      <img
        style="width: 260px; height: 200px; margin: 200px 0 0 60px"
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F014b665736c74b6ac72580ed8a0eae.png%401280w_1l_2o_100sh.png&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657935032&t=ef131f872edfbdf4aede2a5854c6cdcb"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { getRefundList } from "../../../api/dingdan";
let loading = ref(false);
let finished = ref(false);
let refund = ref([]);
let xianTui = ref(true);

onMounted(() => {
  getRefundList().then((data: any) => {
    refund.value = data.data;
    if (refund.value.length == 0) {
      xianTui.value = false;
    } else {
      xianTui.value = true;
    }
  });
});

let load = () => {
  // loading.value = true;
  loading.value = true;

 setTimeout(()=>{
   getRefundList().then((data: any) => {
    refund.value = [...refund.value,...data.data]
    loading.value = false;
  });
 },2000)

  //   setTimeout(() => {
  //     for (let i = 0; i < 6; i++) {
  //       refund.value.push(refund.value.length + 1);
  //     }

  //     loading.value = false;

  //     if (refund.value.length >= 60) {
  //       finished.value = true;
  //     }
  //   }, 1000);
};
</script>

<style lang="scss">
.var-button {
  border: 1px solid #e9e9e9;
}
.var-col {
  align-items: center;
  height: 36px;
  margin-bottom: 0px;
  color: #000;
  text-align: center;
  background-clip: content-box;
}
.var-col:nth-child(2) {
  width: 100px;
  height: 40px;
  font-size: 14px;
  line-height: 40px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.var-col:nth-child(3) {
  font-size: 14px;
  font-weight: 300;
}
.var-col:nth-child(8) {
  font-size: 14px;
  font-weight: 300;
}

:deep(.var--box) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.orderBox {
  width: 390px;
  min-height: 620px;
}
</style>
